<template>
    <div class="menu">
        <ul>
            <li @click="topfun" v-if="showbtn">
                <div><p>返回顶部</p></div>
            </li>
            <li>
                <div><p>微信客服</p></div>
                <img src="@/img/wei.png">
            </li>
            <li @click="qqfun">
                <div><p>qq资讯</p></div>
            </li>
            <li>
                <div><p>What'sup</p></div>
                <img src="@/img/wei.png">
            </li>
        </ul>
    </div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue'

export default {
    name: 'menuview',
    setup() {
        const data = reactive({
            showbtn: false
        })

        const qqfun = () => {
            window.location.href = "tencent://message/?uin=2343645&Menu=yes"
        }

        const topfun = () => {
            window.scrollTo({ top: 0 })
        }

        const scrollfun = () => {
            data.showbtn = window.scrollY > 200  
        }

        // 正确使用生命周期钩子
        onMounted(() => {
            window.addEventListener('scroll', scrollfun)
        })

        return {
            ...toRefs(data),
            qqfun,
            topfun
            // 注意：不需要返回 scrollfun 和 onMounted
        }
    }
}
</script>

<style scoped>
/* 样式保持不变 */
.menu { width: 100px; position:fixed; right: 0px; bottom:100px; z-index:10000; }
.menu ul li { margin:10px; padding: 10px; position: relative; background-color:rgb(252,242,242); text-align:center; }
.menu ul li svg { width: 40px; height: 40px; }
.menu ul li img { width: 150px; height: 150px; position: absolute; right:9px; top:0px; display: none; }
.menu ul li:hover img { display: block; }
</style>